<template>
  <div>
    <p>TestA组件:</p>
    <button @click="NavToA">去到TestA</button>
    <button @click="NavToB">去到TestB</button>
    <button @click="replaceToC">重定向：去到TestC</button>
    <button @click="NavToD">去到TestD</button>
    <button @click="NavToTestA1()">去到TestA/TestA1</button>
    <button @click="NavToTestA1(321)">去到TestA/TestA1（参数不一样而已）</button>

      <div style="border: 1px solid #bbbbbb;width: 500px;height: 200px;">
        <router-view ></router-view>
      </div>

  </div>
</template>
<script>
  export default {
    name: 'TestA',
    data() {
      return {
        A: 'a'
      };
    },
    methods: {
      NavToA() {
        this.$router.push('/TestA')
      },
      NavToB() {
        //this.$router.push('/TestB')
        this.$router.push({path: '/TestB'})
      },
      NavToTestA1(para) {
        let id = 123;
        if (para) id = para;
        //this.$router.push('/TestA/TestA1/123')                    //导航去到/TestA/TestA1/123
        //this.$router.push({ name: 'TestA1', params: { id}})  //导航去到/TestA/TestA1/123
        this.$router.push({path: `/TestA/TestA1/${id}`})      //导航去到/TestA/TestA1/123
      },
      replaceToC() {
        this.$router.replace({path: '/TestC'})
      },
      NavToD(){
        this.$router.push('/TestD')
      }
    }
  };
</script>
